<!DOCTYPE html>
<html>
<head>
 <!-- 
 Title: Joint Resolution page for ICMS 
 Summary: Endless changes......Kill me pls...
 Author: LU Yi Chen
 Date: Nov 2013
-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Integrated Case Management System</title>
<!-- jQuery library -->
<link rel="stylesheet" href="jquery-ui-1.10.3.flick/css/flick/jquery-ui-1.10.3.custom.css">
<script src="jquery-ui-1.10.3.flick/js/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.flick/js/jquery-ui-1.10.3.custom.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" media="screen">
<script src="js/bootstrap.min.js"></script>

<!-- Responsive -->
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/responsive.css">

<!-- Pure -->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/buttons-min.css">
<link rel="stylesheet" href="css/pure-skin-mine.css">

<!-- Font Awesome -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">

<!-- Switch Button -->
<link rel="stylesheet" href="js/jQuery-switchButton/jquery.switchButton.css">
<script src="js/jQuery-switchButton/jquery.switchButton.js"></script>

<!-- Home made CSS -->
<link rel="stylesheet" href="css/decoration.css">
<link rel="stylesheet" href="css/progressBar.css">
<link rel="stylesheet" href="css/buttons.css">

<!-- Home made JS -->
<script src="js/AI1JavaScript.js" ></script>
<script src="js/jsButton.js" ></script>
<script src="js/prePopulateText.js" ></script>
<script src="js/jsResponsive.js"></script>
<script src="js/getURLParameter.js"></script>
<script src="js/dataExchangeAjax.js"></script>
<script src="js/autocomplete.js"></script>
<script src="js/dataExchangeAjax.js"></script>
<!--script src="js/dataExchangeAjax.js"></script-->
<script src="js/approveDialog.js"></script>
<script src="js/confirmationDialog.js"></script>

<!-- jGrowl plugin -->
<link rel="stylesheet" href="js/jGrowl/jquery.jgrowl.css">
<script src="js/jGrowl/jquery.jgrowl.js"></script>

<!-- ProgressBar plugin -->
<script src="js/jqProgressBar.min.js"></script>
<!-- NProgress -->
<link rel="stylesheet" href="js/nprogress/nprogress.css">
<script src="js/nprogress/nprogress.js"></script>


<script>
	$(document).ready(function() {
			//load case info to page elements when those elements are loaded to page
			loadCase2Page();
			var caseIDTrunk = localStorage["caseIDTrunk"];
			$('#childCaseID').append(caseIDTrunk);	
			console.log(caseIDTrunk);
			//console.log(localStorage.response);
			$('#btnManageSwitch').switchButton({
				on_label: 'ON',
				off_label: 'OFF',
				checked: false
			});
			$('#manageAgenciesOptions').hide();

			//$('div#replyPanel').hide();
		});
</script>
</head>
<body>
	<header class="row-fluid">
		<div class="row-fluid">
			<div class="span3 offset9">
				<img id="govLogo" src="images/gov-logo.png" alt="Singapore Government verified"></img>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span12">
				<img id="banner" src="" alt="Integrated Case Management System" class="span8" href="#">
			</div>
		</div>
		<div class="row-fluid">
			<nav class="navbar">
				<div class="navbar-inner">
					<ul class="nav nav-pills">
						<li><a href="inbox(1).html">Inbox</a></li>
						<li><a href="#">Reports</a></li>
						<li><a href="create-case(1).html">New Case</a></li>
					</ul>
					<!-- START:login control -->
					<ul class="nav pull-right">
						<li class="divider-vertical"></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-lg"></i>&nbsp;&nbsp;<span id="username">Litash</span>(<span id="loginType" style="font-weight:600;"></span>)&nbsp;&nbsp;<i class="fa fa-sort-asc"></i></a>
							<ul class="dropdown-menu">
								<li><a href="#">Account</a></li>
								<li><a href="#">Change Password</a></li>
								<li><a href="#">Update Profile Info</a></li>
								<li class="divider"></li>
								<li><a href="login.html" id="btnLogout">Log out</a></li>
							</ul>
						</li>
					</ul>
					<!-- END:login control -->
				</div>
			</nav>
		</div>
		<div class="row-fluid">
			<h1 class="span6" onclick="">Joint Resolution</h1>
			<hr class="thickLine">
		</div>
	</header>
	<div class="container-fluid main">
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label>Master Case ID</label>
				</div>
				<div class="span8">
					<span id="caseIDTrunk" class="fakeLinkText masterCaseIDLink"></span>
				</div>
				<div id="caseID" style="display:none;"></div>
			</div>
			<div class="span6">
				<div class="row-fluid">
					<div class="span4">
						<label for="#caseStatus">Status</label>
					</div>
					<div class="span8">
						<span id="caseStatus"></span>
					</div>
				</div>
			</div>
		</div>
		

		<div class="row-fluid">
			<h2 class="span8">Agencies Involved</h2>
			<hr class="slimLine">
		</div>
		<!--div class="row-fluid">
			<div class="span2 offset8">
				<label for="#btnManageSwitch">Manage Agencies</label>
			</div>
			<div class=" span2 switch-wrapper" title="This switch can only be seen by Lead Agency">
				<input type="checkbox" id="btnManageSwitch" value="1" checked>
			</div>
		</div-->
		<div class="row-fluid">
			<div class="span2 offset10">
				<button type="button" id="btnManageAgenciesToggle" class="pure-button pure-button-primary tailButton" title="This button can only be seen by Lead Agency">Manage Agencies</button>
			</div>
		</div>
		<br/>
		<div class="row-fluid">
			<div class="jointInvolvedTable jointInvolvedTable-cellborder">
				<table id="involvedAgenciesTable">
					<thead>
						<tr>
							<th>Agency</th>
							<th>Agency Response</th>
							<th>Date Accepted</th>
							
						</tr>
					</thead>
					<tbody>
						<tr class="notAddCbx">
							<td class="fakeLinkText">NEA(Lead)</td>
							
							<td class="involveStatus-green">Accepted</td>
							<td>25-Aug-2013 16:10</td>
							
						</tr>
						<tr>
							<td class="fakeLinkText">PUB</td>
							
							<td id="responseStatusTD" class="involveStatus-yellow">Pending</td>
							<td id="responseTimeTD">
								<span id="DummyResponseTime" style="color:#333333;">2 hrs&nbsp;&nbsp;<i class="fa fa-clock-o fa-lg clickable" title="Send reminder."></i></span>
							</td>
							
						</tr>
					</tbody>
				</table>
				<br/>
			</div>
		</div>
		<div class="row-fluid" id="manageAgenciesOptions">
			<div class="span10 offset2">
				<div class="row-fluid">
					<div class="span3">
						<div class="row-fluid">
							<label style="cursor:pointer;"><input type="radio" id="rbtnChangeLead" name="manageAgencies" value="split">Change Lead Agency</input></label>
						</div>
						
					</div>
					<div class="span3">
						<label style="cursor:pointer;"><input type="radio" id="rbtnDelink" name="manageAgencies" value="delink">Delink Selected</input></label>
					</div>
					<div class="span3">
						<div class="row-fluid">
							<label style="cursor:pointer;"><input type="radio" id="rbtnSplit" name="manageAgencies" value="split">Split Joint Selected</input></label>
						</div>
						<div class="row-fluid" id="ddlSplitAgencyDiv">
							<div class="span8">
								<label for="#ddlSplitLeadAgency">Lead Agency</label>
							</div>
							<div class="span4">
								<select name="split lead agency" id="ddlSplitLeadAgency" style="width:120px;">
								</select>
							</div>
						</div>
					</div>
					<div class="span3">
						<button type="button" id="btnManageAgenciesExecute" class="pure-button pure-button-primary tailButton">Submit</button>
					</div>
				</div>
			</div>
		</div>
		



		<!-- START: TABS -->
		<br/>
		<div class="tabbable full-width-tabs row-fluid" id="joitnTabHeader">
			<ul id="joitnTab" class="nav nav-tabs" data-tabs="tabs"> 
				<li class="active"><a href="#jointDetails" data-toggle="tab">Case Detail</a></li>
				<li class=""><a href="#jointDiscussion" data-toggle="tab">Discussion</a></li> 
				<li><a href="#jointReply" data-toggle="tab">Response to Customer</a></li>
			</ul> 
		</div>

		<div class="tab-content row-fluid" id="panelArea">
			<!-- ********** START: Case details tab content ********** -->
			<div class="tab-pane fade active in" id="jointDetails">
				<div class="row-fluid">
					<div class="span6">
						<div class="row-fluid">
							<div class="span4">
								<label>Case ID</label>
							</div>
							<div class="span8"><span id="childCaseID"></span></div>
						</div>

					</div>
					<div class="span6">
						<div class="row-fluid">
							<div class="span4">
								<label for="#caseStatus">Case Status</label>
							</div>
							<div class="span8"><span id="caseStatus"></span></div>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span6">
						<div class="span4">
							<label>Incident Date</label>
						</div>
						<div class="span8"><span id="fbDate"></span></div>
					</div>
					<div class="span6">
						<div class="span4">
							<label for="#recDate">Received Date</label>
						</div>
						<div class="span8"><span id="recDate"></span></div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span6">
						<div class="span4">
							<label for="#dueDate">Due Date</label>
						</div>
						<div class="span8"><span id="dueDate"></span></div>
					</div>
					<div class="span6">
						<div class="span4">
							<label for="#closedDate">Closed Date</label>
						</div>
						<div class="span8"><span id="closedDate"></span></div>
					</div>
				</div>
				<hr class="slimLine">
				<div class="row-fluid">
					<div class="span2">
						<label for="#sbjTitle">Subject Title</label>
					</div>
					<div class="span10"><span id="sbjTitle"></span></div>
				</div>
				<div class="row-fluid">
					<div class="span6">
						<div class="span4">
							<label for="#fbType">Feedback Type</label>
						</div>
						<div class="span8"><span id="fbType"></span></div>
					</div>
					<div class="span6">
						<div class="span4">
							<label for="#channel">Channel</label>
						</div>
						<div class="span8"><span id="channel"></span></div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span2">
						<label for="#caseDesc">Case Description</label>
					</div>
					<div class="span10" id="caseDescDiv">
						<p id="caseDesc" class="bigTextblock"></p>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span6">
						<div class="span4">
							<label for="#agency">Agency</label>
						</div>
						<div class="span8">
							<span id="agency"></span>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span6">
						<div class="span4">
							<label for="#category">Category</label>
						</div>
						<div class="span8">
							<span id="category" class="autoCome"></span>
						</div>
					</div>
					<div class="span6">
						<div class="span4">
							<label for="#subCate">Sub Category</label>
						</div>
						<div class="span8">
							<span id="subCate" class="autoCome"></span>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span6">
						<div class="span4">
							<label for="#address">Address</label>
						</div>
						<div class="span8">
							<p id="address"></p>
						</div>
					</div>
					<div class="span6">
						<div class="span4">
							<label for="#postal">Postal Code</label>
						</div>
						<div class="span8"><span id="postal"></span></div>
					</div>
				</div>
				<div class="row-fluid" style="display:none;">
					<div class="span6">
						<div class="span4">
							<label for="#uploadedImg">Uploaded Image</label>
						</div>
						<div class="span8"><img id="uploadedImg" src="" alt="Uploaded image"></div>
					</div>

				</div>
				<div class="row-fluid">
					<div class="span6">
						<div class="span4">
							<label for="#lastUpdateAgency">Last Update Agency</label>
						</div>
						<div class="span8"><span id="lastUpdateAgency"></span></div>
					</div>
					<div class="span6">
						<div class="span4">
							<label for="#lastAction">Last Update Action</label>
						</div>
						<div class="span8"><span id="lastAction"></span></div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span6">
						<div class="span4">
							<label for="#lastUpdateDate">Last Update Date</label>
						</div>
						<div class="span8"><span id="lastUpdateDate"></span></div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span2">
						<label for="#closureDesc">Closure Description</label>
					</div>
					<div class="span10">
						<p id="closureDesc" class="bigTextblock"></p>
					</div>
				</div>
				
				

				<!--Child case part-->
				<div id="childCasesPart">
					<div class="row-fluid">
						<h2>Child Cases</h2>
						<hr class="slimLine">
					</div>
					<div class="row-fluid">
						<div id="childCaseTableWrap">
							<table id="childCaseTable" class="childTable">
								<thead>
									<tr>
										<th>Child Case ID</th>
										<th>Subject Title</th>
										<th>Category</th>
										<th>Case Status</th>
										<th>Routing Date</th>
										<th>Due Date</th>
										<th>Agency</th>
									</tr>
								</thead>
								<tbody>
									<!--child cases are added in here-->
								</tbody>
							</table>
						</div>
					</div>
				</div>

				<!-- joint agencies part-->
				<div id="jointAgencyPart">
					<div class="row-fluid">
						<h2 class="subTitle">Agencies Involved</h2>
						<hr class="slimLine">
					</div>
					<div class="row-fluid">
						<div id="jointAgencyTableWrap">
							<table id="jointAgencyTable" class="agencyTable">
								<thead>
									<tr>
										<th id="name" style="width: 40%;">Agency Name</th>
										<th id="lead" style="width: 20%;">Lead Agency</th>
										<th id="status" style="width: 40%;">Status</th>
									</tr>
								</thead>
								<tbody>
									<!--child cases go here-->
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span6">
						<div class="span4">
							<label for="">Attachments</label>
						</div>
						<div class="span8">
							<table>
								
							</table>
						</div>
					</div>
					<div class="span6">
						<div class="span6">
							
							<input type="file">
						</div>
						<div class="span6">
							<!-- <button type="button" class="pure-button pure-button-primary">Add Attachment&nbsp;&nbsp;<i class="fa fa-paperclip"></i></button> -->
							
						</div>

					</div>
				</div>
				<div id="acknowledgementDiv">
					<div class="row-fluid">
						<h2>Acknowledgement</h2>
						<hr class="slimLine">
					</div>
					<div class="row-fluid">
						<div class="span2">
							<label for="">Comments (mandatory for REJECT)<span style="color:red;">*</span>
							</label>
						</div>
						<div class="span10">
							<textarea id="rejectComments" class="bigTextarea"></textarea>
						</div>
					</div>
					<div class="row-fluid">
				<!-- <div class="span6">
					<div class="span4">
						<label for="responseDatepicker">Proposed Due Date (mandatory for ACCEPT)<span style="color:red;">*</span></label>
					</div>
					<div class="span8">
						<input type="text" id="responseDatepicker" class="datepicker bigTextblock"/>
					</div>
				</div> -->

				<!-- "More Options" "Edit" "Accept" buttons -->
				<div class="span6 offset6">
					<div id="btnAcceptDiv">
						<button id="btnJointAccept" type="submit" class="pure-button pure-button-success tailButton">Accept</button>
						<button id="btnJointReject" type="submit" class="pure-button pure-button-error tailButton">Reject</button>
					</div>
					<div id="btnEditDiv">
						<button id="btnEdit" type="submit" class="pure-button pure-button-primary tailButton" onclick="redirectEdit()">Edit&nbsp;&nbsp;<i class="fa fa-pencil-square-o"></i></button>
						<button id="btnReply" type="submit" class="pure-button pure-button-primary tailButton" >Response to Customer&nbsp;&nbsp;<i class="fa fa-mail-reply-all"></i></button>
					</div>
				</div>

			</div>
		</div>
		<!-- ********** START: More Option panels ********** -->
		<div class="row-fluid">
			<h2 class="collapsible" style="cursor:pointer;">More Options&nbsp;&nbsp;<i class="fa fa-chevron-down"></i></h2>
			<hr class="slimLine">
		</div>
		<div class="row-fluid" id="optionsPanel">
			<div class="tabbable row-fluid" id="panelHeader">
				<ul id="panelTabs" class="nav nav-tabs" data-tabs="tabs"> 
					<!--li class="active"><a href="#panelReply" data-toggle="tab">Reply to customer</a></li--> 
					<li class="active"><a href="#panelReroute" data-toggle="tab">Reroute</a></li> 
					<li><a href="#panelLink" data-toggle="tab">Link</a></li> 
					<li><a href="#panelMulti" data-toggle="tab">Joint</a></li> 
					<!--li><a href="#panelJoint" data-toggle="tab">Joint Resolution</a></li-->
					<li><a href="#panelReturn" data-toggle="tab">Return to sender</a></li> 
				</ul> 
			</div>

			<div class="tab-content row-fluid" id="panelArea">
				<!-- reply tab -->
				<!--div class="tab-pane fade active in" id="panelReply">
					<div class="row-fluid">
						<div class="span2">
							<label for="#panelReply-caseReply">Enter Reply</label>
						</div>
						<div class="span10">
							<textarea class="bigTextarea" name="caseReply" id="panelReply-caseReply" placeholder="This is the reply seen by the customer"></textarea>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span2 offset2">
							<label style="cursor:pointer;"><input type="radio" name="replyType" id="panelReply-cbxInterim" value="0">Interim Reply</input></label>
						</div>
						<div class="span2">
							<label style="cursor:pointer;"><input type="radio" name="replyType" id="panelReply-cbxInterim" value="1">Final Reply</input></label>
						</div>
						<div class="span5 offset1">
							<label for="#panelReply-ddlInformedCustomer" style="float:left;">Informed Customer?</label>
							<select name="informedCustomer" id="panelReply-ddlInformedCustomer" style="float:right; width:50%;">
								<option value="yes">YES</option>
								<option value="No">NO</option>
							</select>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span2"><label for="#panelReply-replyRemarks">Remarks (Internal)</label></div>
						<div class="span10">
							<textarea class="bigTextarea" name="replyRemarks" id="panelReply-replyRemarks" placeholder="These remarks will not be visible to the customer"></textarea>
						</div>
					</div>
					<button id="panelReply-btnSubmitReply" type="button" class="pure-button pure-button-primary tailButton" onclick="submitReply()">Submit</button>
				</div-->
				<!-- reroute tab -->
				<div class="tab-pane fade active in" id="panelReroute">
					<!-- START: autocomplete module -->
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp">Category Search</label>
							</div>
							<div class="span8">	
								<!-- input for Category keywords. MUST USE 'autoComp' because the id in js is that -->
								<input type="text" class="autoComp tbx100" id="panelReroute-autoComp" placeholder="Enter keyword for categories...">
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp-category">Category</label>
							</div>
							<div class="span8">
								<span id="panelReroute-autoComp-category" class="autoComp-category"></span>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp-agency">Route to</label>
							</div>
							<div class="span8">
								<select id="panelReroute-autoComp-agency" class="autoComp-agency">
									<option value="Undefined">--Choose Agency--</option>
									<option value="AVA">AVA</option>
									<option value="HDB">HDB </option>
									<option value="LTA">LTA</option>
									<option value="NEA">NEA</option>
									<option value="NPARKS">NPARKS</option>
									<option value="PUB">PUB</option>
									<option value="SPF">SPF</option>
								</select>
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelReroute-autoComp-subCate">Sub Category</label>
							</div>
							<div class="span8">
								<span id="panelReroute-autoComp-subCate" class="autoComp-subCate"></span>			
							</div>
						</div>
					</div>
					<!-- END: autocomplete module -->
					<div class="row-fluid">
						<div class="span2"><label for="#panelReroute-Remarks">Remarks</label></div>
						<div class="span10" style="margin">
							<textarea name="rerouteRemarks" id="panelReroute-Remarks" class="bigTextarea"></textarea>
						</div>
					</div>
					<dov class="row-fluid">
						<button type="submit" class="pure-button pure-button-primary tailButton">Send</button>
					</dov>
				</div>
				<!-- link cases tab -->
				<div class="tab-pane fade" id="panelLink">
					<div class="row-fluid">
						<div class="span2"><label for="#panelLink-Search">Search Cases</label></div>
						<div class="span10"><input type="text" id="panelLink-Search" placeholder="E.g. Subject Title, Description, Category, Customer, Email" class="tbx100"></div>
					</div>
					<hr>
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelLink-CaseID">Case ID</label>
							</div>
							<div class="span8">
								<input type="text" id="panelLink-CaseID">
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelLink-FeedbackDate">Incident Date</label>
							</div>
							<div class="span8">
								<input type="text" class="datepicker" id="panelLink-FeedbackDate">
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelLink-Agency">Agency</label>
							</div>
							<div class="span8">
								<select name="panelLink-Agency" id="linkAgency">
									<option value="Undefined">--Choose Agency--</option>
									<option value="AVA">AVA</option>
									<option value="NEA">NEA</option>
									<option value="LTA">LTA</option>
									<option value="NPARKS">NPARKS</option>
									<option value="SPF">SPF</option>
									<option value="PUB">PUB</option>
									<option value="PSD">PSD</option>
								</select>
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#distance">Distance range:</label>
							</div>
							<div class="span7">
								<div class="row-fluid">
									<div class="span10">
										<div id="distanceSlider"></div>
									</div>
									<div class="span2">
										<input type="text" id="distance" style="width:50px;" />
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span6 offset6">
							<div class="span8 offset4">
								<button type="submit" class="pure-button pure-button-primary tailButton">Search</button>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<h3></h3>
						<hr class="slimLine">
					</div>
					<div class="row-fluid inboxTable">
						<table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="linkCaseTable" width="100%" aria-describedby="" style="width: 100%;">
							<colgroup>
							<col span="1" style="width: 2%;">
							<col span="1" style="width: 10%;">
							<col span="1" style="width: 19%;">
							<col span="1" style="width: 10%;">
							<col span="1" style="width: 15%;">
							<col span="1" style="width: 17%;">
							<col span="1" style="width: 17%;">
							<col span="1" style="width: 10%;">
						</colgroup>
						<thead>
							<tr>
								<th><input type="checkbox" id="cbxAll"></input></th>
								<th>Case ID</th>
								<th>Subject Title</th>
								<th>Category</th>
								<th>Case Status</th>
								<th>Incident Date</th>
								<th>Due Date</th>
								<th>Agency</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><input type="checkbox"></input></td>
								<td>201365218456</td>
								<td>Pile of rubbish left at HDB block</td>
								<td>Illegal Dumping</td>
								<td>Pending HDB</td>
								<td>25-Aug-2013</td>
								<td>23-Aug-2013</td>
								<td>HDB</td>
							</tr>
						</tbody>
					</table>
				</div>
				<hr>
				<div class="row-fluid">
					<div class="span6 offset6">
						<div class="row-fluid">
							<div class="span4 offset2">
								<label style="cursor:pointer;"><input type="radio" name="linkType" value="Duplicated">Duplicated case</input></label>
							</div>
							<div class="span4">
								<label style="cursor:pointer;"><input type="radio" name="linkType" value="Related">Related case</input></label>
							</div>
							<div class="span2">
								<button type="submit" class="pure-button pure-button-primary tailButton" id="btnLinkCase">Link</button>
							</div>
						</div>
					</div>
				</div>				
			</div>
			<!-- Joint panel (pre-named as "multi issue") -->
			<div class="tab-pane fade" id="panelMulti">
				<div class="row-fluid">
					<div class="span2">
						<label for="#panelMulti-SubjectTitle">Subject Title</label>
					</div>
					<div class="span10">
						<input type="text" id="panelMulti-SubjectTitle" class="tbx100">
					</div>
				</div>
				<div class="row-fluid">
					<div class="span2">
						<label for="#panelMulti-Issue">Case Description</label>
					</div>
					<div class="span10">
						<textarea name="issueDescription" id="panelMulti-Issue" class="bigTextarea"></textarea>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span6">
						<div class="span4">
							<label for="#panelReroute-autoComp-agency">Target Agency</label>
						</div>
						<div class="span8">
							<select id="panelReroute-autoComp-agency" class="autoComp-agency">
								<option value="Undefined">--Choose Agency--</option>
								<option value="AVA">AVA</option>
								<option value="HDB">HDB </option>
								<option value="LTA">LTA</option>
								<option value="NEA">NEA</option>
								<option value="NPARKS">NPARKS</option>
								<option value="PUB">PUB</option>
								<option value="SPF">SPF</option>
							</select>
						</div>
					</div>
					<div class="span6">
						<label style="cursor:pointer;"><input type="checkbox" id="isLeadAgency">Lead Agency</label>
					</div>
				</div>

				<!-- START: autocomplete module -->
				<div class="row-fluid">
					<div class="span6">
						<div class="span4">
							<label for="#panelReroute-autoComp">Category Search</label>
						</div>
						<div class="span8">	
							<!-- input for Category keywords. MUST USE 'autoComp' because the id in js is that -->
							<input type="text" class="autoComp tbx100" id="panelReroute-autoComp" placeholder="Enter keyword for categories...">
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span6">
						<div class="span4">
							<label for="#panelReroute-autoComp-category">Category</label>
						</div>
						<div class="span8">
							<span id="panelReroute-autoComp-category" class="autoComp-category"></span>
						</div>
					</div>
					<div class="span6">
						<div class="span4">
							<label for="#panelReroute-autoComp-subCate">Sub Category</label>
						</div>
						<div class="span8">
							<span id="panelReroute-autoComp-subCate" class="autoComp-subCate"></span>			
						</div>
					</div>
				</div>

				<!-- END: autocomplete module -->
				<div class="row-fluid">
					<div class="span6">
						<div class="span4">
							<label for="#panelMulti-Address">Address</label>
						</div>
						<div class="span8">
							<textarea name="address" id="panelMulti-Address" class="tbxAddress"></textarea>
						</div>
					</div>
					<div class="span6">
						<div class="span4">
							<label for="#panelMulti-Postal">Postal Code</label>
						</div>
						<div class="span8">
							<input type="text" id="panelMulti-Postal" placeholder="6 digits postal code">
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<button type="submit" id="btnAddAgency" class="pure-button pure-button-primary tailButton">+ Add Agency</button>
				</div>
				<div id="addedAgenciesWrapDiv">
					<div class="row-fluid">
						<h2>Added Agencies</h2>
						<hr class="slimLine">
					</div>
					<div class="row-fluid">
						<div class="span10 offset1 jointInvolvedTable">
							<table id="addedAgenciesTable">
								<colgroup>
								<col span="1" style="width:30%;">
								<col span="1" style="width:20%;">
								<col span="1" style="width:20%;">
								<col span="1" style="width:15%;">
								<col span="1" style="width:15%;">
							</colgroup>
							<thead>
								<tr>
									<th>Subject Title</th>
									<th>Category</th>
									<th>Sub-Category</th>
									<th>Agency</th>
									<th></th>
								</tr>
							</thead>
							<tbody>

							</tbody>
						</table>
					</div>
				</div>
				<br/>
				<br/>
				<div class="row-fluid">
					<button type="button" id="btnSendJointAgency" class="pure-button pure-button-primary tailButton">Send</button>
				</div>
			</div>
			<div id="sendConfirmationDialog" title="Confirmation">
				<p><i class="fa fa-question-circle fa-lg"></i>&nbsp;Confirm sending to these agencies?</p>
			</div>
		</div>

		<!-- joint resolution panel -->
				<!--div class="tab-pane fade" id="panelJoint">
					<div class="row-fluid">
						<div class="span6">
							<div class="span4">
								<label for="#panelJoint-category">Category</label>
							</div>
							<div class="span8">
								<select name="Category" id="panelJoint-category">
									<option value="Animal">Animal</option>
									<option value="Air polution">Air polution</option>
									<option value="BCA">BCA</option>
									<option value="Bicycle">Bicycle</option>
									<option value="danger">danger</option>
								</select>
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelJoint-sub-category">Sub Category</label>
							</div>
							<div class="span8">
								<select name="Category" id="panelJoint-sub-category">
									<option value="Animal">Animal</option>
									<option value="Air polution">Air polution</option>
									<option value="BCA">BCA</option>
									<option value="Bicycle">Bicycle</option>
									<option value="danger">danger</option>
								</select>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span2">
							<label for="#panelJoint-remarks">Remarks</label>
						</div>
						<div class="span10">
							<textarea name="remarks" id="panelJoint-remarks" class="bigTextarea"></textarea>
						</div>
					</div>
					<hr class="slimLine">
					<div class="row-fluid">
						<div class="span6">
							<div class="row-fluid">
								<div class="span4">
									<label for="#panelJoint-TargetAgency">Target Agency</label>
								</div>
								<div class="span8">
									<select name="tergetAgency" id="panelJoint-TargetAgency">
										<option value="NEA">NEA</option>
										<option value="Undefined">Choose Agency</option>
										<option value="AVA">AVA</option>
										<option value="LTA">LTA</option>
										<option value="NPARKS">NPARKS</option>
										<option value="SPF">SPF</option>
										<option value="PUB">PUB</option>
										<option value="PSD">PSD</option>
									</select>
								</div>
							</div>
							<div class="row-fluid">
								<div class="span8 offset4">
									<label style="cursor:pointer;"><input type="checkbox">Lead Agency</label>
								</div>
							</div>
						</div>
						<div class="span6">
							<div class="span4">
								<label for="#panelJoint-Agency-remarks">Remarks</label>
							</div>
							<div class="span8">
								<textarea name="agencyRemarks" id="panelJoint-Agency-remarks" class="tbxAddress"></textarea>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<button type="submit" class="pure-button pure-button-primary tailButton">+ Add Agency</button>
					</div>
				</div-->


				<!-- return to sender panel -->
				<div class="tab-pane fade" id="panelReturn">
					<div class="row-fluid">
						<div class="span2">
							<label for="#panelReroute-Reason">Returning Reason</label>
						</div>
						<div class="span10">
							<textarea name="returningReason" id="panelReroute-Reason" class="bigTextarea"></textarea>
						</div>
					</div>
					<div class="row-fluid">
						<button type="submit" class="pure-button pure-button-primary tailButton">Send</button>
					</div>
				</div>
			</div><!-- end of inner tabs tag -->
		</div><!-- end of tabs nav tag -->
		
		<!-- *********** END: More Option panels ***********  -->



	</div>
	<!-- ********** END: Case details tab content ********** -->


	<!-- ********** START: Discussion tab content ********** -->
	<div class="tab-pane fade" id="jointDiscussion">
		<h2>Discussion Thread</h2>
		<hr class="slimLine">
		<div class="row-fluid jointPostModule">
			<div class="span2 involvedAgencyName">
				<label>NEA</label>
			</div>
			<div class="span10">
				<div class="row-fluid">
					<div class="span4 involvedStaffName">
						<label>Natalie Ee</label>
					</div>
					<div class="span4 postDateTime">
						<label>10-Dec-2013 12:00</label>
					</div>
					<div class="span4">
						<div class="span6 offset6 postOptions">
							<div class="span4">

							</div>
							<div class="span4">

							</div>
							<div class="span4">
								<i class="fa fa-comments-o fa-lg clickable" title="Reply this comment"></i>
							</div>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="row-fluid postTitle">
						<p>RE: Additional Info</p>
					</div>
					<div class="row-fluid postContent">
						<p>Thanks Paul for your swift actions and response. Appreciate your help in clearing up the garbages. Will pen a response. Pls take a look and approve it since this is a joint-investigation case. Many thanks.</p>
					</div>
				</div>
			</div>
			<hr class="slimLine">
		</div>
		<div class="row-fluid jointPostModule">
			<div class="span2 involvedAgencyName">
				<label>PUB</label>
			</div>
			<div class="span10">
				<div class="row-fluid">
					<div class="span4 involvedStaffName">
						<label>Paul You</label>
					</div>
					<div class="span4 postDateTime">
						<label>10-Dec-2013 11:00</label>
					</div>
					<div class="span4">
						<div class="span6 offset6 postOptions">
							<div class="span4">
								<i class="fa fa-trash-o fa-lg clickable"></i>
							</div>
							<div class="span4">
								<i class="fa fa-pencil-square-o fa-lg clickable" title="Edit"></i>
							</div>
							<div class="span4">
								<i class="fa fa-comments-o fa-lg clickable" title="Reply this comment"></i>
							</div>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="row-fluid postTitle">
						<p>Preliminary Findings</p>
					</div>
					<div class="row-fluid postContent">
						<p>Hi Natalie, we have checked the sewage pipes. Our guys reported that there are garbage bags (containing used diapers and decomposed food) clogging up the canal. We have taken the liberty to dispose the garbage bags and we discovered that the sewage pipe is indeed leaking. We have patched up the pipe. Over to you.</p>
					</div>
				</div>
			</div>

			<hr class="slimLine">
		</div>
		<div class="row-fluid jointPostModule">
			<div class="span2 involvedAgencyName">
				<label>PUB</label>
			</div>
			<div class="span10">
				<div class="row-fluid">
					<div class="span4 involvedStaffName">
						<label>Paul You</label>
					</div>
					<div class="span4 postDateTime">
						<label>10-Dec-2013 11:00</label>
					</div>
					<div class="span4">
						<div class="span6 offset6 postOptions">
							<div class="span4">
								<i class="fa fa-trash-o fa-lg clickable"></i>
							</div>
							<div class="span4">
								<i class="fa fa-pencil-square-o fa-lg clickable" title="Edit"></i>
							</div>
							<div class="span4">
								<i class="fa fa-comments-o fa-lg clickable" title="Reply this comment"></i>
							</div>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="row-fluid postTitle">
						<p>RE: Additional Info</p>
					</div>
					<div class="row-fluid postContent">
						<p>Hi Natalie, thanks for the address. We will look into it. </p>
					</div>
				</div>
			</div>
			<hr class="slimLine">
		</div>
		<div class="row-fluid jointPostModule">
			<div class="span2 involvedAgencyName">
				<label>NEA</label>
			</div>
			<div class="span10">
				<div class="row-fluid">
					<div class="span4 involvedStaffName">
						<label>Natalie Ee</label>
					</div>
					<div class="span4 postDateTime">
						<label>10-Dec-2013 10:26</label>
					</div>
					<div class="span4">
						<div class="span6 offset6 postOptions">
							<div class="span4">

							</div>
							<div class="span4">

							</div>
							<div class="span4">
								<i class="fa fa-comments-o fa-lg clickable" title="Reply this comment"></i>
							</div>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="row-fluid postTitle">
						<p>RE: Additional Info</p>
					</div>
					<div class="row-fluid postContent">
						<p>Hi Paul, the citizen was angry and in a hurry when I took up the call. I have contacted him and manage to find out that the underpass is near a big canal at east coast park. </p>
					</div>
				</div>
			</div>
			<hr class="slimLine">
		</div>
		<div class="row-fluid jointPostModule">
			<div class="span2 involvedAgencyName">
				<label>PUB</label>
			</div>
			<div class="span10">
				<div class="row-fluid">
					<div class="span4 involvedStaffName">
						<label>Paul You</label>
					</div>
					<div class="span4 postDateTime">
						<label>09-Dec-2013 15:26</label>
					</div>
					<div class="span4">
						<div class="span6 offset6 postOptions">
							<div class="span4">
								<i class="fa fa-trash-o fa-lg clickable"></i>
							</div>
							<div class="span4">
								<i class="fa fa-pencil-square-o fa-lg clickable" title="Edit"></i>
							</div>
							<div class="span4">
								<i class="fa fa-comments-o fa-lg clickable" title="Reply this comment"></i>
							</div>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="row-fluid postTitle">
						<p>Additional Info</p>
					</div>
					<div class="row-fluid postContent">
						<p>Hi Natalie, thanks for the heads-up. Did the citizen provide any photo or location of where this incident might be occurring? The address in the case details seems quite vague.</p>
					</div>
				</div>
			</div>
			<hr class="slimLine">
		</div>
		<div class="row-fluid jointPostModule">
			<div class="span2 involvedAgencyName">
				<label>NEA</label>
			</div>
			<div class="span10">
				<div class="row-fluid">
					<div class="span4 involvedStaffName">
						<label>Natalie Ee</label>
					</div>
					<div class="span4 postDateTime">
						<label>09-Dec-2013 15:26</label>
					</div>
					<div class="span4">
						<div class="span6 offset6 postOptions">
							<div class="span4">

							</div>
							<div class="span4">

							</div>
							<div class="span4">
								<i class="fa fa-comments-o fa-lg clickable" title="Reply this comment"></i>
							</div>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="row-fluid postTitle">
						<p>Please Assist to Investigate</p> 
					</div>
					<div class="row-fluid postContent">
						<p>Hi PUB, we received a phone call from this citizen who reported of foul faeces smell which could be due to sewage pipe burst. Kindly investigate.</p>
					</div>
				</div>
			</div>
			<hr class="slimLine">
		</div>

		<h2>New Reply</h2>
		<hr class="thickLine">
		<div class="row-fluid">
			<div class="span2">
				<label for="#tbxResponseTitle">Title</label>
			</div>
			<div class="span10">
				<input type="text" class="tbx100" id="tbxResponseTitle"></input>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span2">
				<label for="#txaResponseContent">Content</label>
			</div>
			<div class="span10">
				<textarea name="txaResponseContent" id="txaResponseContent" class="bigTextarea"></textarea>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span2">
				<label for="">Attachment</label>
			</div>
			<div class="span10">
				<input type="file">
				<!-- <button type="button" class="pure-button pure-button-primary">Upload Attachment&nbsp;&nbsp;<i class="fa fa-paperclip"></i></button> -->
			</div>
		</div>
		<div class="row-fluid">
			<button type="button" id="btnResponseSubmit" class="pure-button pure-button-primary tailButton">Submit</button>	
		</div>
	</div>
	<!-- ********** END: Discussion tab content ********** -->


	<!-- ********** START: Reply to Customer tab content ********** -->
	<div class="tab-pane fade" id="jointReply">
		<h2>Final Response</h2>
		<hr class="slimLine">
		<div class="row-fluid finalReplyModule">
			<div class="row-fluid">
				<div class="span2 finalReplyTitle">
					<label>Title</label>
				</div>
				<div class="span8 finalreplyTitleText">
					<p>Foul Smell at Big Canal in East Coast Park</p>
				</div>
				<div class="span2 finalReplyEditButtons">
					<i class="fa fa-pencil-square-o fa-lg clickable" title="Edit title"></i>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span2 finalReplyContent">
					<label>Content</label>
				</div>
				<div class="span8 finalReplyContentText">
					<p>Dear Mr. Chen,</p>
					<p>Thank you for your feedback on 10-Dec-13 (Friday). We have looked into the matter concerning the foul smell emitting from the canal at East Coast Park. Someone has thrown 3 big bags of garbage into the canal, resulting in a clog. The foul smell, (particularly of faeces) is attributed to one of the garbage bags which contains soiled diapers. NEA has dispatched our team to clear up the clog.</p>
					<p>We thank you for your kind feedback.</p>
					<p>Sincerely,</p>
					<p>Natalie Ee, </p>
					<p>Customer Service Officer</p>
				</div>
				<div class="span2 finalReplyEditButtons">
					<i class="fa fa-pencil-square-o fa-lg clickable" title="Edit content"></i>
				</div>
			</div>
					<!--div class="row-fluid">
						<button type="button" id="btnApproveCheck" class="pure pure-button pure-button-primary tailButton">Approve check&nbsp;!</button>
					</div-->
				</div>

				<h2>Approved by</h2>
				<hr class="slimLine">
				<div class="row-fluid">
					<div class="span10 offset1 jointInvolvedTable">
						<table id="approveAgencyTable">
							<colgroup>
							<col span="1" style="width:33%;">
							<col span="1" style="width:33%;">
							<col span="1" style="width:33%;">
						</colgroup>
						<tr>
							<td>NEA (Lead)</td>
							<td class="involveStatus-green">Approved</td>
							<td>25-Aug-2013 16:10</td>
						</tr>
						<tr>
							<td>PUB</td>
							<td id="btnApproveReplyTd">
								<button type="button" id="btnApproveReply" class="pure-button pure-button-success">Approve this Response</button>
							</td>
							<td>Invited on 25-Aug-2013 16:10</td>
						</tr>
					</table>
				</div>

			</div>
			<h2>Edit History</h2>
			<hr class="slimLine">
			<div class="row-fluid editHistoryModule">
				<div class="row-fluid">
					<div class="span2 involvedAgencyName">
						<label>NEA</label>
					</div>
					<div class="span5 involvedStaffName">
						<label>Marcia Ong</label>
					</div>
					<div class="span5 postDateTime">
						<label>10-Dec-2013 15:26</label>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span2 editHistory">
						<label>Area</label>
					</div>
					<div class="span10">
						<p>Title</p>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span2">
						<label>Edited Text</label>
					</div>
					<div class="span10">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, laboriosam.</p>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span2">
						<label>Remarks</label>
					</div>
					<div class="span10">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, minus, placeat recusandae eum cumque commodi. Beatae, dicta cum quia tempora vel voluptate accusamus quas deserunt dolore quo ea eius a minus neque nobis eaque odit!</p>
					</div>
				</div>
				<hr class="slimLine">
			</div>
			<div class="row-fluid editHistoryModule">
				<div class="row-fluid">
					<div class="span2 involvedAgencyName">
						<label>PUB</label>
					</div>
					<div class="span5 involvedStaffName">
						<label>James Lau</label>
					</div>
					<div class="span5 postDateTime">
						<label>10-Dec-2013 13:15</label>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span2 editHistory">
						<label>Area</label>
					</div>
					<div class="span10">
						<p>Content</p>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span2">
						<label>Edited Text</label>
					</div>
					<div class="span10">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, debitis, eius omnis delectus expedita ullam hic voluptates pariatur corporis recusandae illo non itaque commodi. Natus?</p>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span2">
						<label>Remarks</label>
					</div>
					<div class="span10">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, minus, placeat recusandae eum cumque commodi. Beatae, dicta cum quia tempora vel voluptate accusamus quas deserunt dolore quo ea eius a minus neque nobis eaque odit!</p>
					</div>
				</div>
			</div>



		</div>
		<!-- ********** END: Reply to Customer tab content ********** -->


		<!-- ********** START: Approve Check Dialog ********** -->
		<div id="dialog-form" title="Add agency to approve this Response">
			<form>
				<fieldset>
					<label for="dialogAgencyName">Agency Name</label>
					<!--input type="text" name="dialogAgencyName" class="text ui-widget-content ui-corner-all" id="dialogAgencyName" /-->
					<select id="dialogAgencyName" class="ui-widget-content">
						<option value="AVA">AVA</option>
						<option value="HDB">HDB </option>
						<option value="LTA">LTA</option>
						<option value="NEA">NEA</option>
						<option value="NPARKS">NPARKS</option>
						<option value="PUB">PUB</option>
						<option value="SPF">SPF</option>
					</select>
				</fieldset>
				<button type="button" class="pure-button-success" id="btnAdd2InviteList">Add</button>
			</form>
			<label>Invite List</label>
			<table id="dialogTempAgencies">
				<colgroup>
				<col style="width:60%;">
				<col style="width:40%;">			
			</colgroup>

		</table>
	</div>

	<!-- ********** END: Approve Check Dialog ********** -->
</div>
</div>



<footer class="row-fluid">
	<span id="copyright">&copy; Copyright 2013, All rights Reserved.</span>
	<span id="PSTCD">Privacy Statement | Terms &amp; Conditions | Disclaimer</span>
</footer>

<!-- dialogs -->
<div id="btnJointConfirmationDialogAccept" class="btnResponseARConfirmationDialog" title="Confirmation">
	<p><i class="fa fa-question-circle fa-lg"></i>&nbsp;&nbsp;Confirm accepting this case?</p>
</div>



<div id="btnJointConfirmationDialogReject" class="btnResponseARConfirmationDialog" title="Confirmation">
	<p><i class="fa fa-question-circle fa-lg"></i>&nbsp;&nbsp;Confirm rejecting this case?</p>
</div>



<div id="timeSelectorDialog" title="Select your response time period">
	<p><i class="fa fa-exclamation-triangle fa-lg"></i>&nbsp;&nbsp;Please choose a due date!</p>
</div>



<div title="Alert" id="emptyCommentsDialog">
	<p><i class="fa fa-exclamation-triangle fa-lg"></i>&nbsp;&nbsp;Please enter comments for reason of rejection!</p>
</div>



<div id="masterDetailDialog" title="Master Case Details">
	<div class="row-fluid">
		<h2>Case Details</h2>
		<hr class="slimLine">
	</div>
	<div class="row-fluid">
		<div class="span6">
			<div class="span4">
				<label>Incident Date</label>
			</div>
			<div class="span8">
				<span id="fbDate">10-Dec-2013</span>
			</div>
		</div>
		<div class="span6">
			<div class="span4">
				<label for="#recDate">Received Date</label>
			</div>
			<div class="span8">
				<span id="recDate">10-Dec-2013 07:12</span>
			</div>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span2">
			<label for="#sbjTitle">Subject Title</label>
		</div>
		<div class="span10">
			<span id="sbjTitle">Foul smell at big canal in East Coast Park</span>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span6">
			<div class="span4">
				<label for="#fbType">Feedback Type</label>
			</div>
			<div class="span8">
				<span id="fbType">Complaint</span>
			</div>
		</div>
		<div class="span6">
			<div class="span4">
				<label for="#channel">Channel</label>
			</div>
			<div class="span8">
				<span id="channel">CRM</span>
			</div>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span2">
			<label for="#caseDesc">Description</label>
		</div>
		<div class="span9" id="caseDescDiv">
			<p id="caseDesc" class="bigTextblock">
				strong smell while jogging towards underpass. Could be due to leaked or choked sewer. Please send someone to investigate
			</p>
		</div>
	</div>

	<div class="rowfluid">
		<h2>Customer information</h2>
		<hr class="slimLine">
	</div>
	<div class="row-fluid">
		<div class="span6">
			<div class="span4">
				<label for="#custName">Customer Name</label>
			</div>
			<div class="span8">
				<span id="custName"></span>
			</div>
		</div>
		<div class="span6">
			<div class="span4">
				<label for="#phone">Phone</label>
			</div>
			<div class="span8">
				<span id="phone"></span>
			</div>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span6">
			<div class="span4">
				<label for="#NRIC">NRIC</label>
			</div>
			<div class="span8">
				<span id="NRIC"></span>
			</div>
		</div>
		<div class="span6">
			<div class="span4">
				<label for="#mCustID">Mobile Customer ID</label>
			</div>
			<div class="span8">
				<span id="mCustID"></span>
			</div>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span6">
			<div class="span4">
				<label for="#email">Email</label>
			</div>
			<div class="span8">
				<span id="email"></span>
			</div>
		</div>
	</div>
</div>

<div id="selectLeadAgencyDialog" title="Select Lead Agency">
	<p>Please select a Lead Agency for Split Joint Resolution</p>
	
</div>

<div id="executeChangeLeadDialog" title="Confirmation">
	<p><i class="fa fa-question-circle fa-lg"></i>&nbsp;&nbsp;Confirm change <span id="changeLeadDialogLeadAgency" style="color: #0070C0;font-weight: 400;"></span> as the Lead Agency of this Joint Resolution case?</p>
</div>

<div id="executeDelinkDialog" title="Confirmation">
	<p><i class="fa fa-question-circle fa-lg"></i>&nbsp;&nbsp;Confirm DELINK selected agencies to this case?</p>
</div>

<div id="executeSplitDialog" title="Confirmation">
	<p><i class="fa fa-question-circle fa-lg"></i>&nbsp;&nbsp;Confirm SPLIT this joint resolution and create another joint resolution for selected agencies? <span id="splidDialogLeadAgency" style="color: #0070C0;font-weight: 400;"></span> will be the Lead Agency</p>
</div>

</body>
</html>